<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础语法1：插值表达式、data、methods、computed和watch</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1 style="color:red;">知识点1:插值表达式</h1>
        <p>我是变量:{{msg}}</p>
        <p>我是表达式:{{num+100}}</p>
        <p>我是条件运算符:{{1+1==2?'ok':'no'}}</p>
        <p>我是方法:{{}}</p>
        <h1 style="color: red;">知识点2:data</h1>
        <h3>我们在控制台中可以通过实例名.$data的形式来访问或修改data中的数据</h3>
        <h1 style="color: red;">知识点3:methods</h1>
        <h3>方法的定义有两种形式： 1. 方法名(){}  2.方法名:function(){}</h3>
        <p>{{sub(999999999)}}</p>
            <h1>知识点4:coumputed计算属性</h1>
            <h3>当我们遇到比较复杂的逻辑时，vue提倡我们使用computed计算属性
                在计算属性里，我们可以解决比较复杂的逻辑,包括逻辑运算，函数调用，最后只要返回一个结果就可以了
            </h3>
            <p>字符串倒置：{{rev}}</p>
            <p>调用字符串倒置：{{revMethod()}}</p>
            <h3>计算属性是基于其依赖的变量进行缓存的，只有它相关的依赖发生改变事，才会重新求值
                而方法事每次页面刷新都会重新调用
            </h3>
            <h3>通常计算属性是不能进行修改的，是只读的</h3>
            <h1>知识点5：watch 监听</h1>
            <h3>当我们在需要某种状态变化时，执行一些其他操作，watch具有状态监听功能
                只要监听到当前vue实例中的数据变化，就会调用当前数据所绑定的方法
            </h3>
            <h4>1.函数式监听器：在watch选项中声明的函数即为函数式监听器，其中函数名就是我们要监听的数据器</h4>
            <h4>2.对象监听器：在watch选项中声明的对象即为对象式监听器，其中的对象名就是我们要监听的数据源</h4>


    </div>
</body>

</html>
<script>
    const appConn = Vue.createApp({
        //data里面放置全部的数据，包括变量和对象
        data() {
            return {
                msg:'我的第一个vue页面',
                num:1,
                grade:60,
                users:{
                    name:"cyj",
                    age:18
                }
            }
        },
    //在methods里面放置全部的方法
        methods: {
            add(){
                return this.num +19089
            },
            sub:function(val){
                return this.num +val
            },
            revMethod(){
                 console.log("我是计算属性我被调用了一次");
                return this.msg.split('').reverse().join('')

            }
            
        },
        computed:{
            //在此处放置全部的计算属性
            //字符串倒置
            rev(){
                console.log("我是计算属性我被调用了一次");
                return this.msg.split('').reverse().join('')
            }

        },
        watch:{
            grade(newData,oldData){
                    console.log("改变前的数据"+oldData);
                    console.log("改变后的数据"+newData);
                    if(oldData<newData){
                        console.log("你进步了")
                    }
                    else{
                        console.log("你退步了")

                    }
                },
                'users.age':{
                    handler(newData,oldData){
                        console.log("改变前的数据"+oldData);
                        console.log("改变后的数据"+newData);
                        if(newData>=120|| newData<0)
                        console.log("你确定你输入的是年龄吗");
                    }

                }

            }

        },).mount("#app")
</script>